MANVIA BLOG

NextJs / Web / Step2: using function

Step2 : Function

STEPS

Step1: react-app container in html


                        <div id="react-app"></div>

Step2: include react libraries


                    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
                    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
                    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Step3: script



                    <script type="text/babel"> 
                    function Greeting() {
                        return <div><h1>Hello JSX!</h1></div> 
                    } 
                    ReactDOM.render(<Greeting />, document.getElementById('react-app') ); 
                    </script>

Greeting() and call Complete code


                                        <body> 
                        <div id="react-app"></div> 
                        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
                        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
                        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
                        <script type="text/babel"> 
                            function Greeting() {
                                return <div><h1>Hello JSX!</h1></div> 
                            } 
                            ReactDOM.render(<Greeting />, document.getElementById('react-app') ); 
                        </script>
                    </body>